<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--
        引入layui
    -->
    <!-- 引用layui-->
    <link rel="stylesheet" href="/layui/css/layui.css">

    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/layui/layui.all.js"></script>

</head>
<body>

<!--
        分页展示所有的学生
-->

<!--  获取所有学生-->
<table id="demo" lay-filter="test"></table>
<script>
    // layui 加载table 模块
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({ // 渲染表格
            elem: '#demo' // 和对应的 元素 绑定
            ,height: 500
            ,url: '/getAllStudentByPage' //数据接口  // 自动分页参数 ?page=1&limit=10
            , toolbar:true // 配置工具栏
            ,page: {limit:4//每页显示4条
                ,limits:[1,2,3,4,5] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            } //开启分页
            ,cols: [[ //表头  // file 获取数据中对应的属性值  title 每列名字
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名' }
                ,{field: 'sex', title: '性别',  sort: true}
                ,{field: 'age', title: '年龄'}
                ,{field: 'height', title: '身高'}
                ,{field: 'birthday', title: '生日'}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}

            ]]
        });




        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除

                alert("去数据库删除data:"+JSON.stringify(data))

                // layui 弹窗
                layer.confirm('真的删除行么', function(index){



                    obj.del(); //删除对应行（tr）的DOM结构  // 删除当前


                    // 向服务端发送删除请求
                    // 此处可以发送ajax

                    $.ajax({
                        url: '/deleteStudentById?id='+data.id,
                        method: 'get',
                        success: function (result) {
                            if (result.code == 0) { // 如果成果
                                table.reload('demo', {});//重新加载数据
                            } else {
                                alert(result.message)
                            }
                            layer.close(index)// 关闭窗口
                        }

                    })

                });
            } else if(layEvent === 'edit'){ //编辑

                alert("更新学生")

                // 弹框更新
                layui.use(["layer"],function(){

                    layer.open({
                        type: 1 //Page层类型
                        ,skin: 'layui-layer-molv'
                        ,area: ['380px', '500px']
                        ,title: ['更新学生信息','font-size:18px']
                        ,btn: ['确定', '取消']
                        ,shadeClose: true
                        ,shade: 0 //遮罩透明度
                        ,maxmin: true //允许全屏最小化
                        ,content:$("#window")  //弹窗路径
                        ,success:function(layero,index){  // 初始弹框
                            $('#id').val(data.id);
                            $('#name').val(data.name);
                            $('#age').val(data.age);
                            $('#sex').val(data.sex);
                            $('#height').val(data.height);


                            // $('#birthday').val();
                            // 初始化时间格式
                            layui.use(["laydate","form"],function(){
                                var laydate = layui.laydate;
                                //执行一个laydate实例
                                laydate.render({
                                    elem: '#birthday', //指定元素
                                    format:'yyyy-MM-dd HH:mm:ss',
                                    value:data.birthday //默认值

                                });
                            });

                        },yes:function(index,layero){

                            alert("确定");
                            // layer.close(index);// 关闭窗口
                            alert($("#studentform").serialize())
                            $.ajax({
                                url: '/updateStudent',
                                data:{
                                    id:$("#id").val(),
                                    name:$("#name").val(),
                                    age:$("#age").val(),
                                    sex:$("#sex").val(),
                                    height:$("#height").val(),
                                    birthday:$("#birthday").val()
                                },
                                method: 'post',
                                success: function (result) {
                                    if (result.code == 0) { // 如果成果
                                        table.reload('demo', {});//重新加载数据
                                    } else {
                                        alert(result.msg)
                                    }
                                    layer.close(index)// 关闭窗口
                                }

                            })

                        }
                    });
                });

            }
        });
    });



</script>

<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--  弹窗布局-->
<div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">
    <form class="layui-form" id="studentform" method="post" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">ie</label>
            <div class="layui-input-block">
                <input type="text" id="id" name="id" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" id="age" name="age" lay-verify="title" autocomplete="off" placeholder="请输入年龄" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" id="sex" name="sex" lay-verify="title" autocomplete="off" placeholder="请输入性别" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身高</label>
            <div class="layui-input-block">
                <input type="text" id="height" name="height" lay-verify="title" autocomplete="off" placeholder="请输入身高" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" id="birthday" name="birthday" lay-verify="title" autocomplete="off" placeholder="请输入生日" class="layui-input">
            </div>
        </div>


    </form>
</div>



</body>
</html>